<template>
        <div class="modal" :id = "id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog-700" id="myModalLabel">
                <div class="modal-content" :style="largeMoadl" >
                    <slot name='modal-header'>
                        <div class="modal-header">         
                            <h3 class="modal-title" >
                                <template v-if ="type=='add'">{{$t('common.add')}}{{title}}{{$t('common.confg')}}</template> 
                                <template v-else-if="type=='letIn'">{{$t('safeplot.add')}}{{title}}</template>       
                                <template v-else-if="type=='edit'">{{$t('common.edit')}}{{title}}{{$t('common.confg')}}</template>
                                <template v-else-if="type=='del'">{{$t('common.del')}}{{title}}{{$t('common.confg')}}</template>
                                <template v-else>{{type}}{{title}}</template>                      
                            </h3>
                            <span class="close" data-dismiss="modal" aria-hidden="true">&times;</span>
                        </div>
                    </slot>
                    <div class="modal-body">
                        <!--正在请求-->
                        <div v-if="result==='ing'">
                            <img :src="`/static/${themeColor}-img/loading.gif`" />              
                            <p v-if ="type=='add'">{{$t('common.adding')}}</p>
                            <p v-else-if="type=='edit'">{{$t('common.editing')}}</p>
                            <p v-else-if="type=='del'">{{$t('common.deling')}}</p>                           
                            <p v-else>{{$t('common.ing')}}{{type}}{{$t('common.later')}}</p>
                        </div>
                        <!--成功-->
                        <div v-else-if="result==='ok'">
                            <img  :src="`/static/${themeColor}-img/success.png`" />
                            <span >{{$t('common.successNotice')}}</span>
                        </div>
                        <!--失败-->
                        <div v-else-if="result==='error'&&type=='other'">
                            <img  :src="`/static/${themeColor}-img/fail.png`" />
                        </div>						
                        <div v-else>
                            <slot name='modal_content'>
                                <!--删除-->
                                <template v-if="type=='del'">
                                    <p style="font-size: 16px;">{{$t('common.delNotice')}}</p>
                                </template>
                                <!--添加编辑-->    
                                <template v-else>                                    
                                    <slot name="add_edit"> <!--在没有自定义添加和编辑的时候显示。-->                                 
                                        <table class="add_edit_item">                                 
                                            <template v-for="item in field" >
                                                <tr v-if="item.type !== 'checkbox' && item.type !== 'rank' && item.type !== 'none'">                          
                                                    <td style="text-align: right;padding-right: 20px;" >
                                                        <label>{{item.label}}:</label>
                                                    </td>
                                                    <td style="text-align: left;position: relative;width: 220px;">
                                                        <!--根据不同的item.type,选择不同的输入框-->
                                                        <inputs class="inputs_wrap" :type="item.type" :name="item.name" :regex="item.regex"
                                                            :emums="item.emums?item.emums:selectItem" :val = "params[item.name]"
                                                            :disabled = "is_disabled" @getVal="getVal" ></inputs>
                                                    </td>
                                                    <td style="text-align: left;padding-left: 10px;">
                                                        <span class="remark"  v-html='item.remark'></span>                                        
                                                    </td>                                                            
                                                </tr>
                                            </template>                                  
                                        </table>
                                        </slot>
                                </template> 
                            </slot>                              
                        </div>          
                    </div>
                    <slot name='modal_footer'>
                        <div class="modal-footer">
                            <p v-if="type ==='add'|| type === 'edit'" class="remark" style="text-align: left;margin-bottom: 4px;">{{momalNotice}}</p>   
                            <div v-if = "error_notice" class="error_notice">*{{error_msg}}</div>
                            <button class="sure-btn button button--aylen" @click="modalEvent">{{$t('common.sureBtn')}}</button>					
                            <button  class="cancel-btn button button--aylen" data-dismiss="modal">{{$t('common.cancelBtn')}}</button>
                        </div>
                    </slot>
                </div>
            </div>
        </div>               
</template>
<script>
    import inputs from './inputs'
    
    export default {
        props: {
            id:{
                type:String
            },
            title:{
                type:String
            },
            field:{
                type: Array
            },
            collectField:{
                 type:String
            },
            selectItem:{
                type:Array
            },
            status:{
                type:String
            },
            errorMsg:{
                type:String
            },
            type:{},
            selectedItems:{
                type: Array
            },
            editData:{
                type:Object
            },
            momalNotice:{
                type:String
            },
            largeMoadl:{},
            closeable:{}
		},
		components: {
            inputs
		},
        data() {
            return{
                theme: this.themeColor,
                show: true,     
                params: {},
                error_msg: "",
                error_notice: '',
                result: "",
                format_error_arr: [],
                is_disabled: false
            }
        },
        watch: {
            status() {
                this.result = this.status
                if (this.status === "error") {
                    this.error_msg = this.errorMsg    
                    this.error_notice = true
                }
                if (this.status === "ok") {
                    setTimeout(()=> {$('#'+this.id).modal('hide')}, 500)
                }
            },
            errorMsg() {
                if (this.errorMsg === "") {
                    this.error_msg = ''
                    this.error_notice = false
                }
            },
            editData() {
                this.params = this.editData
                 //端口虚开 特殊处理
                if (this.title === this.$t('safeplot.navBtn9')&&this.params.t_ip_mac) {
                    if (this.params.t_ip_mac.indexOf('.')>0) {
                        this.is_disabled = true
                        this.params.t_ip_type = '0'
                    } else {
                        this.is_disabled = false
                    }     
                }
            },
            error_msg() {
                this.$emit('sentErrorMsg',this.error_msg)
            }
        },
        methods:{
            modalEvent() {        
                this.params.oper = this.type 
                switch(this.type) {
                    case 'add':
                        if (this.testVal() && this.format_error_arr.length <= 0) {
                            this.$emit('addEvent', this.params)
                        }
                        break
                    case 'edit': 
                        if (this.testVal() && this.format_error_arr.length <= 0) {
                            this.$emit('editEvent', this.params)
                        }
                        break
                    case 'del':
                        let tese_val = true         
                        this.params[this.collectField + "s"] = this.selectedItems.join(",")
                        this.$emit('delEvent', this.params)
                        break
                    case 'letIn':
                        this.$emit('letInEvent')
                        break
                    
                    default:
                        this.$emit('modalEvent')
                        break
                }
            },
            getVal(name,val,format_test) {//接收inputs发送回来的值
                this.params[name] = val
                if (format_test) { 
                    this.error_notice = false
                    for(let [index,ele] of this.format_error_arr.entries()) {
                        if (ele == name) {
                            this.format_error_arr.splice(index,1)
                        }
                    }
                } else {
                    let format_error_arr = new Set([...this.format_error_arr,name])
                    this.format_error_arr = [...format_error_arr]
                }
                //特殊处理
                if (name=='t_ip_mac'&&this.title==this.$t('safeplot.navBtn9')) {
                    if (val.indexOf('.')>0) {
                        this.is_disabled = true
                        this.params.t_ip_type = '0'
                    } else {
                        this.is_disabled = false
                    }     
                }          
            }, 
            testVal() {
                for(let i = 0; i < this.field.length; i++) {             
                    if (this.field[i].type!='checkbox'&&this.field[i].type!='rank') {
                        let val = this.params[this.field[i].name]               
                        let label = this.field[i].label
                        let format_error = false
                        for(let [index,ele] of this.format_error_arr.entries()) {
                            if (ele == this.field[i].name) {
                                format_error = true
                            }
                        }
                        if (typeof val === 'undefined' && this.field[i].requried) {
                            this.error_notice = true
                            this.error_msg = label+this.$t('common.eptNotice')+label+"!"
                            return false
                        } else if (format_error) {
                            this.error_notice = true
                            this.error_msg = label+this.$t('common.errNotice')
                            return false
                        } else {
                            this.error_notice = false   
                           
                        }    
                    } 
                }
                return true             
            },        
        }
    }
</script>